<template>
	<view>
		<cu-custom :bgColor="'bg-' + theme.backgroundColor" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">数据统计</block>
		</cu-custom>
		<view class="bg-white pl20 pr20">
			<uni-datetime-picker
				v-model="datetimerange"
				@change="changeDate"
				type="daterange"
				rangeSeparator="至" />
		</view>
		<scroll-view
			scroll-y
			class="scroll"
			refresher-enabled
			@refresherrefresh="refresherrefresh"
			scroll-anchoring
			:style="customBarSty"
			:refresher-triggered="reftriggered">
			<view class="content">
				<view v-for="(item, index) in data" :key="index" class="item">
					<view class="title">
						{{ item.title }}
					</view>
					<view class="info">
						<view v-for="(val, i) in item.info" :key="i" class="info-item">
							<view class="f40 text-666">{{ info[val.prop] || 0 }}</view>
							<view class="f28 text-666 mt10">{{ val.label }}</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
const app = getApp();
import api from "../../api/api.js";
import util from "@/utils/util.js";
export default {
	data() {
		return {
			customBarSty: `height: calc(100vh - ${this.CustomBar - 0 + 42}px);`,
			theme: app.globalData.theme,
			reftriggered: false,
			data: [
				{
					title: "直播数据",
					info: [
						{
							label: "观看人数",
							prop: "userLiveNum",
						},
						{
							label: "直播场数",
							prop: "liveNum",
						},
					],
				},
				{
					title: "答题数据",
					info: [
						{
							label: "答题人数",
							prop: "topicNum",
						},
						{
							label: "答对人数",
							prop: "topicYesNum",
						},
					],
				},
				{
					title: "红包数据",
					info: [
						{
							label: "发放红包（元）",
							prop: "rewardAllPay",
						},
						{
							label: "领取红包（元）",
							prop: "rewardPay",
						},
					],
				},
				{
					title: "积分数据",
					info: [
						{
							label: "积分总数",
							prop: "integralAllNum",
						},
						{
							label: "领取积分数",
							prop: "integralNum",
						},
					],
				},
				{
					title: "优惠券数据",
					info: [
						{
							label: "发放总数",
							prop: "couponAllNum",
						},
						{
							label: "领取优惠券",
							prop: "couponNum",
						},
					],
				},
				{
					title: "奖品数据",
					info: [
						{
							label: "发放总数",
							prop: "lotteryAllNum",
						},
						{
							label: "获得奖品数",
							prop: "lotteryNum",
						},
					],
				},
			],
			info: {},
			datetimerange: [],
			endTime: "",
			startTime: "",
		};
	},
	onLoad(options) {
		this.getData();
	},
	methods: {
		changeDate(e) {
			console.log(e, "eeeeeeee");
			if (e && e.length) {
				this.startTime = e[0] + " 00:00:00";
				this.endTime = e[1] + " 23:59:59";
			} else {
				this.startTime = "";
				this.endTime = "";
			}
			this.refresherrefresh();
		},
		getData(fn) {
			let para = {
				startTime: this.startTime,
				endTime: this.endTime,
			};
			api.tzDataBoard(util.filterForm(para)).then((res) => {
				this.info = res.data;
				typeof fn == "function" && fn();
			});
		},
		refresherrefresh(e) {
			this.reftriggered = true;
			this.getData(() => {
				this.reftriggered = false;
			});
		},
	},
};
</script>

<style lang="scss" scoped>
.content {
	padding: 32rpx;
	.item {
		padding: 32rpx;
		background-color: #fff;
		border-radius: 16rpx;
		margin-bottom: 16rpx;
		.title {
			font-weight: 600;
			font-size: 36rpx;
			padding-bottom: 32rpx;
			border-bottom: 2rpx solid #f6f6f6;
		}
		.info {
			margin-top: 32rpx;
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			.info-item {
				width: 50%;
			}
		}
	}
}
.text-666 {
	color: #666;
}

// .scroll {
// 	height: calc(100vh - 94px);
// }
</style>
